<script setup>
const members = [
  { avatar: "/static/image/3.1.11.jpg", name: "张晓明" },
  { avatar: "/static/image/3.1.11.jpg", name: "张晓明" },
  { avatar: "/static/image/3.1.11.jpg", name: "张晓明" },
  { avatar: "/static/image/3.1.11.jpg", name: "张晓明" }
];
</script>

<template>
  <view class="container">
    <view class="team-card">
		55555555555555555555555555
      <view class="team-header">
        <image src="/static/image/zbxh.jpeg" class="school-logo"></image>
        <view class="team-name-container">
          <text class="school-name">武汉第一中学</text>
          <br>
          <text class="team-name">武汉一队</text>
        </view>
      </view>
      <view class="captain-info">
        <view class="info-title">队长信息</view>
        <view class="captain-detail">
          <image src="/static/image/3.1.11.jpg" class="captain-avatar"></image>
          <view class="captain-text-container">
            <text class="captain-name">陈婉仪</text>
            <text class="captain-id">202011090890</text>
            <br>
            <text class="captain-department">计算机学院</text>
          </view>
          <view class="call-button">
            <image src="/static/image/call_icon.png" class="call-icon"></image>
            <text class="call-text">拨打电话</text>
          </view>
        </view>
      </view>
      <view class="member-info">
        <view class="info-title">队员信息</view>
        <view class="member-list">
          <view class="member-item" v-for="(member, index) in members" :key="index">
            <image :src="member.avatar" class="member-avatar"></image>
            <text class="member-name">{{member.name}}</text>
            <image src="/static/image/edit_icon.png" class="edit-icon"></image> <!-- 假设编辑图标路径 -->
          </view>
        </view>
      </view>
      <view class="stop-recruit-button">
        <button class="stop-button">停止招募</button>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  background-color: #F5F5F5;
  padding: 10px;
}

.team-card {
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 5px 0 #E2E4EB;
  padding: 15px;
}

.team-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.school-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.team-name-container {
  margin-left: 10px;
}

.school-name {
  font-weight: 500;
  font-size: 16px;
  color: #333333;
}

.team-name {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  margin-top: 5px;
}

.info-title {
  font-weight: 500;
  font-size: 15px;
  color: #333333;
  margin-bottom: 10px;
}

.captain-detail {
  display: flex;
  align-items: center;
}

.captain-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.captain-text-container {
  margin-left: 10px;

  flex: 1;
}

.captain-name {
  font-weight: 400;
  font-size: 15px;
  color: #333333;
}


.captain-id {
  font-weight: 400;
  font-size: 13px;
  color: #666666;
  margin-top: 3px;
}

.captain-department {
  font-weight: 400;
  font-size: 13px;
  color: #666666;
  margin-top: 3px;
}

.call-button {
  display: flex;
  align-items: center;
  background-color: #E0F7FA;
  border-radius: 5px;
  padding: 5px 10px;
}

.call-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.call-text {
  font-weight: 400;
  font-size: 13px;
  color: #00BFA5;
}

.member-list {
  display: flex;
  flex-direction: column;
}

.member-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.member-name {
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  margin-left: 10px;
  flex: 1;
}

.edit-icon {
  width: 16px;
  height: 16px;
}

.stop-recruit-button {
  text-align: center;
  margin-top: 15px;
}

.stop-button {
  background-color: #2196F3;
  color: #FFFFFF;
  width: 100%;
  height: 30px;
  border-radius: 5px;
  padding: 5px 20px;
  font-weight: 400;
  font-size: 10px;
}
</style>

